<template>
    <div class="person">
        <h1>
            情况而:监视(ref)定义的(对象类型)数据
        </h1>
        <h2>当前求和为{{ person.name }}</h2>
        <h2>当前求和为{{ person.age  }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
    </div>
</template>
<script lang="ts" setup name='Person'>
import { ref, watch } from "vue";
let person = ref({
    name: "GG"
    ,age:20
})

function changeName() {
   person.value.name += "~~"
}
function changeAge() {
    person.value.age += 1
}
function changePerson() {
    person.value = {name:"XX",age:30}

}
/* 
   当我们监视的是ref定义的对象数据类型时
        直接写值,我们监视的是这个对象的内存地址! 监视时默认不是深度模式,所以在我们修改整个对象的时候,才会引起监视的回调函数
        当我们开启深度模式后,我们可以监视到对象内部的数据


        对于监视的是内存地址的解释

        如我们点击修改前两个按钮时,我们的对象的内存地址并没有进行改变,故而我们触发监视后的新值和旧值都是一个.
        但当我们点击修改整个对象后,我们的新值和旧值就会不同,就是因为其内存地址发生了改变!
*/
const stopWatch = watch(person, (newValue, oldValue) => {
    console.log("person发生了变化", newValue, oldValue);
},{deep:true})
        
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
